<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>


<script type="text/javascript" src="js/treeinterface.js"></script>
<link rel="stylesheet" href="css/tree.css" />

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.layout-latest.js"></script>

<link rel="stylesheet" href="css/demo.css" />
	
<script type="text/javascript" src="js/chili-1.7.pack.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>

<SCRIPT type="text/javascript">
$(document).ready(function () {
	$('body').layout({ applyDefaultStyles: true });
});
</SCRIPT>
var outerLayout, middleLayout, innerLayout; 

	$(document).ready(function () { 

		outerLayout = $('body').layout({ 
			center__paneSelector:	".outer-center" 
		,	west__paneSelector:		".outer-west" 
		,	east__paneSelector:		".outer-east" 
		,	west__size:				125 
		,	east__size:				125 
		,	spacing_open:			8 // ALL panes
		,	spacing_closed:			12 // ALL panes
		//,	north__spacing_open:	0
		//,	south__spacing_open:	0
		,	north__maxSize:			200
		,	south__maxSize:			200
		}); 

		middleLayout = $('div.outer-center').layout({ 
			center__paneSelector:	".middle-center" 
		,	west__paneSelector:		".middle-west" 
		,	east__paneSelector:		".middle-east" 
		,	west__size:				100 
		,	east__size:				100 
		,	spacing_open:			8  // ALL panes
		,	spacing_closed:			12 // ALL panes
		}); 

		innerLayout = $('div.middle-center').layout({ 
			center__paneSelector:	".inner-center" 
		,	west__paneSelector:		".inner-west" 
		,	east__paneSelector:		".inner-east" 
		,	west__size:				75 
		,	east__size:				75 
		,	spacing_open:			8  // ALL panes
		,	spacing_closed:			8  // ALL panes
		,	west__spacing_closed:	12
		,	east__spacing_closed:	12
		}); 

	}); 

	<script type="text/javascript">
	// --------------- MENU ---------------
	jQuery().ready(function(){
		// simple accordion
		jQuery('#list1a').accordion({
			autoheight: true
		});
		jQuery('#list1b').accordion({
			autoheight: true
		});
		

		
		var wizard = $("#wizard").accordion({
			header: '.title',
			event: false
		});
		
		var wizardButtons = $([]);
		$("div.title", wizard).each(function(index) {
			wizardButtons = wizardButtons.add($(this)
			.next()
			.children(":button")
			.filter(".next, .previous")
			.click(function() {
				wizard.accordion("activate", index + ($(this).is(".next") ? 1 : -1))
			}));
		});
		
		// bind to change event of select to control first and seconds accordion
		// similar to tab's plugin triggerTab(), without an extra method
		var accordions = jQuery('#list1a, #list1b, #navigation, #wizard');
		
		jQuery('#switch select').change(function() {
			accordions.accordion("activate", this.selectedIndex-1 );
		});
		jQuery('#close').click(function() {
			accordions.accordion("activate", -1);
		});
		jQuery('#switch2').change(function() {
			accordions.accordion("activate", this.value);
		});
		jQuery('#enable').click(function() {
			accordions.accordion("enable");
		});
		jQuery('#disable').click(function() {
			accordions.accordion("disable");
		});
		jQuery('#remove').click(function() {
			accordions.accordion("destroy");
			wizardButtons.unbind("click");
		});
	});
	</script>
</HEAD>
<BODY>
<DIV class="ui-layout-center">
	Center
	<P><A href="http://layout.jquery-dev.net/demos.html">Go to the Demos page</A></P>
	<P>* Pane-resizing is disabled because ui.draggable.js is not linked</P>

	<P>* Pane-animation is disabled because ui.effects.js is not linked</P>
</DIV>

<DIV class="ui-layout-north">North</DIV>
<DIV class="ui-layout-south">South</DIV>
<DIV class="ui-layout-east">East</DIV>
<div class="middle-east">Middle East</div> 
<DIV class="ui-layout-west">
		<div class="ui-layout-north">Palette</div> 

		<div class="basic" style="position:relative; left:-9px; top:10px; width:110%; height:97%; float:bottom"  id="list1a">
			<a>Templates</a>

			<div style="height:93%">
				<p>
					You've seen it coming!<br/>
					Buy now and get nothing for free!<br/>
					Well, at least no free beer. Perhaps a bear,<br/>
					if you can afford it.
				</p>
			</div>

			<a>Components</a>
			<div style="height:93%">
				<p>
					<ul class="myTree">
						<li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">View [1]</span>
							<ul>
								<li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">object 1 1</span></li>
								<li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 1 2</span>
									<ul style="display: none;">
										<li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 1 2 1</span></li>
					
										<li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 1 2 2</span></li>
										<li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 1 2 3</span></li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">View [2]</span>
					
							<ul>
								<li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 2 1</span></li>
								<li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 2 2</span></li>
							</ul>
						</li>
					</ul>
				</p>
			</div>


		</div>

</DIV>
<script type="text/javascript" src="js/custom/tree.js"></script>


</BODY>
</HTML>